<template>
	<view class="post" :class="[isDark?'dark':'']" :style="{'background-color':isDark?'#1c1c1c':'#f6f6f6','max-height':isDark?'100vh':'auto'}">
		<view class="header" :style="[{height:CustomBar + 'px'},{top:jpHeight + 'px'}]">
			<view class="cu-bar" :class="isDark?'dark':'bg-white'" :style="{'height': CustomBar + 'px','padding-top':StatusBar + 'px','background-color':isDark?'#1c1c1c':'#ffffff'}">
				<view class="action" @tap="isback">
					<text class="cuIcon-back"></text>
				</view>
				<view class="content text-bold" :style="[{top:StatusBar + 'px'}]">
					{{$t('edit.paytext.editpaycontext')}}
				</view>
				<view class="action">
				</view>
			</view>
		</view>
		<view :style="[{padding:(NavBar+10) + 'px 10px 0px 10px'}]"></view>
		<form>
			<view class="margin-sm" :class="isDark?'dark':'bg-white'" :style="'font-size: 30upx;padding: 20upx;border-radius: 20upx;background-color:'+(isDark?'#1c1c1c':'#ffffff')">
				<view class="margin-sm">
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<text>{{$t('edit.paytext.payprice')}}</text>
						<view style="display: flex;align-items: stretch;justify-content: flex-end;">
							<input v-model="shopPrice" type="number" placeholder="$t('edit.paytext.plspayprice')"
								style="width: 45%;text-align: right;margin-right: 5px;" />
							<span>{{currencyName}}</span>
						</view>

					</view>
				</view>
				<hr style="width: 100%;margin: auto;height: 1px;background: #e5e5e5d9;border: none;" />
				<view class="margin-sm" @tap="setSelectShow()">
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<view>{{$t('edit.paytext.vipdiscount')}}</view>
						<view>{{shopDiscountA}}</view>
					</view>
				</view>
			</view>
			<view class="margin-sm" :class="isDark?'dark':'bg-white'" :style="'border-radius: 20upx;background-color:'+(isDark?'#1c1c1c':'#ffffff')">
				<view class="margin-sm">
					<cu-editor ref="editor" :mrPoster="videoPoster" :SPimg="SPimg" :musicpic='musicpic'
						editorId='editor' :NavBar="NavBar" @editorFocus="handleEditorFocus" :uploadTime="uploadTime"
						@editorBlur="handleEditorBlur" :url="this.$API.upload()" :formData="formData" :content="text"
						:isPay="true" :MusicUpload='MusicUpload' :isWz="false" placeholder="$t('edit.paytext.plspaycontext')"
						@save="onSave"></cu-editor>
				</view>

			</view>
			<!--  #ifdef APP-PLUS || H5 -->
			<view class="margin-sm" style="display: flex;justify-content: space-between;">
				<tn-button type="button" fontColor='#333' :backgroundColor="isDark?'#2c2c2c':'#fff'" width="35%" class="form-btn"
					@click="setEmpty()">{{$t('edit.paytext.clear')}}</tn-button>
				<tn-button :backgroundColor="isDark?'#2283a5':'#01BEFF'" fontColor="#fff" type="button" width="60%" class="form-btn"
					@click="savePaidContent()">{{$t('global.save')}}</tn-button>
			</view>
			<!--  #endif -->
			<!--  #ifdef MP-WEIXIN -->
			<view class="margin-sm">
				<tn-button type="button" fontColor='#333' :backgroundColor="isDark?'#2c2c2c':'#fff'" width="100%" class="form-btn"
					@click="setEmpty()">{{$t('edit.paytext.clear')}}</tn-button>
				<view class="margin-top-sm">
					<tn-button :backgroundColor="isDark?'#2283a5':'#01BEFF'" fontColor="#fff" type="button" width="100%" class="form-btn"
						@click="savePaidContent()">{{$t('global.save')}}</tn-button>
				</view>
			</view>
			<!--  #endif -->

		</form>
		<tn-select @confirm="confirm" v-model="selectShow" title="$t('edit.paytext.plsvipdiscount')" :defaultValue="[10]" :searchShow="false"
			:list="discountOptions"></tn-select>
		<view class="dark-bg" style="height: 500rpx;background: #1c1c1c;" v-if="isDark"></view>
	</view>
</template>
<script>
	import {
		localStorage
	} from '../../js_sdk/mp-storage/mp-storage/index.js'
	import darkModeMixin from '@/utils/darkModeMixin.js'
	export default {
		mixins: [darkModeMixin],
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				NavBar: this.StatusBar + this.CustomBar,
				AppStyle: this.$store.state.AppStyle,
				isPaid: 0,
				modalName: "",
				showContent: true,
				uid: 0,
				selectShow: false,
				price: 0,
				discountOptions: [{
						value: '0.0',
						label: $t('edit.paytext.vipfree')
					},
					{
						value: '0.1',
						label: $t('edit.paytext.1off')
					},
					{
						value: '0.2',
						label: $t('edit.paytext.2off')
					},
					{
						value: '0.3',
						label: $t('edit.paytext.3off')
					},
					{
						value: '0.4',
						label: $t('edit.paytext.4off')
					},
					{
						value: '0.5',
						label: $t('edit.paytext.5off')
					},
					{
						value: '0.6',
						label: $t('edit.paytext.6off')
					},
					{
						value: '0.7',
						label: $t('edit.paytext.7off')
					},
					{
						value: '0.8',
						label: $t('edit.paytext.8off')
					},
					{
						value: '0.9',
						label: $t('edit.paytext.9off')
					},
					{
						value: '1.0',
						label: $t('global.nodiscount')
					}
				],
				token: "",
				poster: this.$API.SPmusicpic(),
				isShow: false,
				havePay: false,
				name: "",
				sid: 0,

				uploadTime: this.$API.getuploadTime(),
				curHeight: 0,
				jpHeight: 0,
				screenHeight: 0,
				postheight: 0,
				poststyle: "",
				readstyle: "",
				isText: 0,
				draft: 0,
				MusicUpload: this.$API.SPstarMusicUpload(),
				musicpic: this.$API.SPmusicpic(),
				videoPoster: this.$API.getVideoPoster(),
				SPimg: this.$API.SPimgs(),
				formData: {},
				//文章表单部分
				title: "",
				category: "",
				tag: "",
				categoryText: "",
				text: '',
				textRead: "",
				shopPrice: "",
				shopDiscount: "1.0",
				shopDiscountA: $t('global.nodiscount'),
				isSpace: false,
				currencyName: "",
				//页面状态
				type: "add",
				cid: 0,
				lenght: 0,
				shopList: [],
				editInterval: null,
				shopID: -1,
				sectionName: $t('global.unknowncircle'),
				sectionid: 0,
				content: "",
			}
		},
		onPullDownRefresh() {

		},
		onHide() {
			var that = this;
			clearInterval(that.editInterval);
			that.editInterval = null;
		},
		onShow() {
			var that = this;
			if (localStorage.getItem('userinfo')) {
				var userInfo = JSON.parse(localStorage.getItem('userinfo'));
				that.token = userInfo.token;
				if (userInfo.screenName) {
					that.name = userInfo.screenName;
				} else {
					that.name = userInfo.name;
				}
				that.formData = {
					'token': userInfo.token,
					'username': that.name
				}
			}
			if (localStorage.getItem('curSection')) {
				var curSection = JSON.parse(localStorage.getItem('curSection'));
				that.sectionid = curSection.id;
				that.sectionName = curSection.name;
				console.log(curSection);
				localStorage.removeItem('curSection');
			}
			if (that.havePay && that.sid != '0') {
				var payData = JSON.parse(localStorage.getItem("payId" + that.sid));
				if (payData) {
					that.text = payData.text;
					that.shopPrice = payData.shopPice;
					that.shopDiscount = payData.shopDiscount;
					var discountOption = that.discountOptions.find(option => option.value === that.shopDiscount);
					if (discountOption) {
						that.shopDiscountA = discountOption.label;
					}
				}
			} else {
				var payData = JSON.parse(localStorage.getItem("payIdmy"));
				if (payData) {
					that.text = payData.text;
					that.shopPrice = payData.shopPice;
					that.shopDiscount = payData.shopDiscount;
					var discountOption = that.discountOptions.find(option => option.value === that.shopDiscount);
					if (discountOption) {
						that.shopDiscountA = discountOption.label;
					}
				}
			}
			localStorage.setItem('isSave', "false");
		},
		onLoad(res) {
			var that = this;
			that.getleiji()
			that.editInterval = setInterval(function() {
				if (localStorage.getItem('goBack')) {
					localStorage.removeItem('goBack');
					that.back();
				}
			}, 500);
			that.NavBar = that.CustomBar;
			if (res.havePay) {
				that.havePay = res.havePay;
			}
			if (res.sid) {
				that.sid = res.sid;
			}
			var verifyLevel = 0;
			if (localStorage.getItem('AppInfo')) {
				try {
					var AppInfo = JSON.parse(localStorage.getItem('AppInfo'));
					verifyLevel = AppInfo.verifyLevel;
				} catch (e) {
					console.log(e);
				}
			}
			if (localStorage.getItem('userinfo')) {
				var userInfo = JSON.parse(localStorage.getItem('userinfo'));
				that.token = userInfo.token;
				that.uid = userInfo.uid;
				that.uid = userInfo.uid;
				if (userInfo.screenName) {
					that.name = userInfo.screenName;
				} else {
					that.name = userInfo.name;
				}
			}
		},
		methods: {
			getleiji() {
				var that = this;
				uni.request({
					url: that.$API.SPset(),
					method: 'GET',
					dataType: "json",
					success(res) {
						that.currencyName = res.data.assetsname;
					},
					fail(error) {
						
					}
				})
			},
			editPaidContent() {
				uni.navigateTo({
					url: '/pages/edit/payText'
				});
			},
			confirm(e) {
				this.shopDiscount = e[0].value
				this.shopDiscountA = e[0].label
			},
			back() {
				localStorage.removeItem('isSave')
				uni.navigateBack({
					delta: 1
				});
			},
			setSelectShow() {
				this.selectShow = true
			},
			okBtn() {
				const nowDate = +new Date();
				uni.setStorageSync('modelView', nowDate);
				this.cancleBtn();
			},
			handleEditorFocus() {
				
			},
			handleEditorBlur() {
				
			},
			onSave(e) {
				var that = this
				that.content = e.html;
			},
			savePaidContent() {
				var that = this
			    this.$refs.editor.save();
			    setTimeout(() => {
			        if (this.shopPrice == '') {
			            uni.showToast({
			                title: that.$t('edit.paytext.paypriceempty'),
			                icon: 'none'
			            });
			            return false;
			        }
			        var shopPriceInt = Number(this.shopPrice);
			        if (!Number.isInteger(shopPriceInt) || shopPriceInt <= 0) {
			            uni.showToast({
			                title: that.$t('edit.paytext.paypricepositive'),
			                icon: 'none'
			            });
			            return false;
			        }
					if (this.content == '<p><br></p>' || this.content == '') {
					    uni.showToast({
					        title: that.$t('edit.paytext.paycontextempty'),
					        icon: 'none'
					    });
					    return false;
					}
			        var payData = {
			            text: this.content,
			            shopPice: this.shopPrice,
			            shopDiscount: this.shopDiscount
			        };
			        if (this.havePay && this.sid != '0') {
			            localStorage.setItem("payId" + this.sid, JSON.stringify(payData));
			        } else {
			            localStorage.setItem("payIdmy", JSON.stringify(payData));
			        }
			
			        uni.showToast({
			            title: that.$t('edit.paytext.paycontextsave'),
			            icon: 'none'
			        });
			        localStorage.setItem('isSave', "true");
			        setTimeout(() => {
			            this.back();
			        }, 1000);
			    }, 500);
			},
			setEmpty() {
				var that = this;
				uni.showModal({
					title: that.$t('global.prompt'),
					content: that.$t('edit.paytext.clearpaycontext'),
					success: function(res) {
						if (res.confirm) {
							that.text = ''
							that.shopPrice = ''
							that.shopDiscount = '1.0'
							that.shopDiscountA = that.$t('global.nodiscount')
							if (that.havePay && that.sid != '0') {
								localStorage.removeItem("payId" + that.sid)
							} else {
								localStorage.removeItem('payIdmy')
							}
							uni.showToast({
								title: that.$t('edit.paytext.cleared'),
								icon: 'none'
							})
						}
					}
				});
			},
			isback() {
				var that = this;
				var isSave = localStorage.getItem('isSave');
				if (isSave == 'true') {
					that.back()
				} else {
					uni.showModal({
						title: that.$t('global.prompt'),
						content: that.$t('global.editnosave'),
						cancelText: that.$t('global.exit'),
						confirmText: that.$t('global.leave'),
						success: function(res) {
							if (res.confirm) {

							} else if (res.cancel) {
								that.back()
							}
						}
					});
				}
			}
		}
	}
</script>

<style>
	.dark input, .dark textarea{
		background-color: #1c1c1c !important;
	}
	.post {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
	}
</style>